<template>
    <div class="container">
        <div class="title-container">
            <span class="title-text" @click="menuHandle">
                精选菜单
                <i :class="inShow ? 'iconfont icon-up' : 'iconfont icon-down'"></i>
            </span>
            <div class="title-txt">
                <a class="txt-new">最新</a>
                <a class="txt-row">最热</a>
            </div>
            <div :class="inShow ? 'clearfix' : 'item-list'">
                <div class="sort">
                    <p>
                        <i></i>默认
                    </p>
                    <span>精选歌单</span>
                    <p>
                        <i></i>歌曲分类
                    </p>
                    <div class="sort-item">
                        <div v-for="item in tagsList" :key="item.id">
                            <span>{{ item.name }}</span>
                        </div>
                    </div>
                </div>
                <!-- v-for="item in tagsList" :key="item.id" -->
            </div>
        </div>
        <div class="content-container">
            <div class="content" v-for="item in playList" :key="item.id" @click="checkHandle">
                <img :src="item.coverImgUrl" alt />
                <p class="music-title">
                    <span :title="item.name">{{ item.name }}</span>
                </p>
                <p>
                    <i class="iconfont icon-play"></i>
                    {{ item.trackCount }}万
                </p>
            </div>
        </div>
        <div class="pagination">
            <el-pagination
                background
                layout="prev, pager, next"
                :total="100"
                @current-change="currentChange"
            ></el-pagination>
        </div>
        <div type="primary" v-loading.fullscreen.lock="fullscreenLoading" text="加载中..."></div>
    </div>
</template>

<script>
import { getPlatList, getTagsList } from '../../api/shortlist';
export default {
    name: 'PlayLists',
    data() {
        return {
            inShow: false,
            offset: 0,
            //用来存放请求回来的数据
            playList: [],
            //用来存放分类信息列表
            tagsList: [],
            fullscreenLoading: false
        }
    },
    created() {

    },
    async mounted() {
        this.fullscreenLoading = true

        const playList = await getPlatList()
        this.playList = playList.playlists
        const tagsList = await getTagsList()
        this.tagsList = tagsList.tags
        this.fullscreenLoading = false

    },
    methods: {
        menuHandle() {
            console.log("menuHandle");
            this.inShow = !this.inShow;

        },
        checkHandle() {

        },
        currentChange(e) {
            console.log(e);
        }
    },
    computed: {

    },
    watch: {

    }

}
</script>
<style scoped>
.container {
    margin: 0 auto;
    width: 1280px;
}
.title-container {
    position: relative;
    width: 1280px;
    height: 30px;
    line-height: 30px;
    box-sizing: border-box;
    display: flex;
}
.title-text {
    font-size: 24px;
    font-weight: bold;
}
.title-txt {
    margin-left: 20px;
}
.txt-new {
    margin-right: 10px;
}
.txt-row {
    margin-right: 10px;
}
.active {
    border-bottom: 6px orange solid;
}
.clearfix {
    position: absolute;
    top: 40px;
    width: 800px;
    height: 700px;
    background-color: #ffffff;
    display: block;
}
.sort {
    width: 100%;
    padding: 30px;
    list-style: none;
}
.sort p {
    font-weight: bold;
    margin: 15px;
}
.sort span {
    border-radius: 15px;
    padding: 8px;
    margin-left: 15px;
    background-color: orange;
}
.sort-item {
    display: flex;
    flex-wrap: wrap;
}
.sort-item div {
    margin: 10px;
}
.sort-item div span {
    font-weight: bold;
    border-radius: 15px;
    padding: 8px;
    background-color: #ccc;
    margin: 0 5px;
}
.sort-item div span:hover {
    background-color: orange;
}
.item-list {
    position: absolute;
    top: 40px;
    width: 800px;
    height: 700px;
    background-color: #ffffff;
    display: none;
}
.content-container {
    width: 1280px;
    margin: 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.content {
    width: 220px;
    height: 300px;
    margin-top: 8px;
}
img {
    border-radius: 10px;
    width: 220px;
    height: 220px;
}
p {
    margin: 0;
    padding-left: 5px;
}
.music-title span {
    font-size: 16px;
    /* white-space: nowrap; */
    overflow: hidden;
    text-overflow: ellipsis;
}
.music-title:hover {
    font-weight: bold;
}
.pagination {
    text-align: center;
}
</style>
